<template>
    <el-dialog
        v-model="tenantAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="tenantDataForm" :rules="tenantRules" ref="tenantDataFormRef">
                <el-form-item label="租户编码" label-width="20%" prop="tenantId">
                    <el-input v-model="tenantDataForm.tenantId" placeholder="租户编码" clearable />
                </el-form-item>
                <el-form-item label="租户名称-中文" label-width="20%" prop="tenantNameCn">
                    <el-input v-model="tenantDataForm.tenantNameCn" placeholder="租户名称-中文" clearable />
                </el-form-item>
                <el-form-item label="租户名称-英文" label-width="20%" prop="tenantName">
                    <el-input v-model="tenantDataForm.tenantName" placeholder="租户名称-英文" clearable />
                </el-form-item>
                <el-form-item label="租户所属用户" label-width="20%" prop="componentId">
                    <el-select v-model="tenantDataForm.tenantAdminUserId" clearable filterable placeholder="租户所属用户">
                        <el-option :value="item.id" :label="item.userAccount" v-for="item in userInfoList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租户详情描述" label-width="20%" prop="tenantDescription">
                    <el-input v-model="tenantDataForm.tenantDescription" placeholder="租户详情描述" clearable />
                </el-form-item>
                <el-form-item label="租户源公司名称" label-width="20%" prop="tenantCompanyName">
                    <el-input v-model="tenantDataForm.tenantCompanyName" placeholder="租户源公司名称" clearable />
                </el-form-item>
                <el-form-item label="租户源联系方式" label-width="20%" prop="tenantCompanyContact">
                    <el-input v-model="tenantDataForm.tenantCompanyContact" placeholder="租户源联系方式" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {ElNotification} from "element-plus";
import {tenantInfoCreate, tenantInfoQuery, tenantInfoUpdate} from "@/request/tenant";
import {userInfoQuery} from "@/request/user";

export default {
    name: "TenantAddOrUpdateDialog",
    props: ['title', 'tenantDataForm'],
    data() {
        return {
            tenantRules: {
                tenantId: [{ required: true, message: '租户编码不能为空', trigger: 'blur' }],
                tenantNameCn: [{ required: true, message: '租户名称-中文不能为空', trigger: 'blur' }],
                tenantName: [{ required: true, message: '租户名称-英文不能为空', trigger: 'blur' }],
                tenantAdminUserId: [{ required: true, message: '租户所属用户不能为空', trigger: 'blur' }],
                tenantDescription: [{ required: true, message: '租户详情描述不能为空', trigger: 'blur' }],
                tenantCompanyName: [{ required: true, message: '租户源公司名称不能为空', trigger: 'blur' }],
                tenantCompanyContact: [{ required: true, message: '租户源联系方式不能为空', trigger: 'blur' }]
            },
            userInfoList: [],
            saveLoading: false
        }
    },
    computed: {
        tenantAddOrUpdateDialogVisible() {
            return this.$store.state.tenantAddOrUpdateDialogVisible
        },
        tenantSearchData() {
            return this.$store.state.tenantSearchData
        }
    },
    methods: {
        cancelDialog() {
            this.$store.state.tenantAddOrUpdateDialogVisible = false
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['tenantDataFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (this.tenantDataForm.id === '') {
                        // 添加数据
                        tenantInfoCreate(this.tenantDataForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                });
                                tenantInfoQuery(this.tenantSearchData).then(res => {
                                    this.$store.state.tenantDataList = res.data
                                })
                                this.$store.state.tenantAddOrUpdateDialogVisible = false
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 修改数据
                        tenantInfoUpdate(this.tenantDataForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                });
                                tenantInfoQuery(this.tenantSearchData).then(res => {
                                    this.$store.state.tenantDataList = res.data
                                })
                                this.$store.state.tenantAddOrUpdateDialogVisible = false
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                }
            })
        }
    },
    created() {
        // 查询用户信息
        let userSearchData = {
            pageInfo: {
                pageSize: 1000,
                pageIndex: 1
            }
        }
        userInfoQuery(userSearchData).then(res => {
            this.userInfoList = res.data.dataList
        })
    }
}
</script>

<style scoped lang="less">

</style>